<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>说话我听着</title>
</head>
<body>
<h1>Can I help you ?</h1>
<button id="btn" onmousedown="startRecording()">按住说话</button>
<audio id="play_audio" src="" autoplay="autoplay">
    Your browser does not support the audio element.
</audio>
</body>
<script src="../static/Recorder.js"></script>
<script src="../static/jquery-3.3.1.min.js"></script>
<script src="../static/md5.js"></script>
<script>
    var API_URL = 'http://127.0.0.1:8080/';
    $("#btn").on('mouseup', function () {
        stopRecording();
    });
    var now_time = new Date().toString();
    var user_id = md5(now_time);
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    var audio_context = new AudioContext();
    var recorder;
    var id;
    var flag = true;
    navigator.getUserMedia = (navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);
    navigator.getUserMedia({audio: true}, startUserMedia, function (e) {
        console.log('No live audio_pcm input: ' + e);
    });

    function startUserMedia(stream) {
        var input = audio_context.createMediaStreamSource(stream);
        recorder = new Recorder(input);
    }

    function startRecording() {
        $("#btn").text("录音中。。。");
        recorder && recorder.record();
    }

    function stopRecording() {

        $("#btn").attr('disabled', "disabled");
        $("#btn").text("传输中...");
        recorder && recorder.stop();

        // create WAV download link using audio_pcm data blob
        //createDownloadLink();
        uploadToServer();
        recorder.clear();
    }

    function uploadToServer() {
        recorder && recorder.exportWAV(function (blob) {
            var fileType = 'wav';
            var fileName = new Date().valueOf() + '.' + fileType;
            var url = API_URL + 'upload_audio';

            // create FormData
            var formData = new FormData();
            formData.append("name", fileName);
            formData.append("user_id", user_id);
            formData.append("file", blob);
            $.ajax(
                {
                    method: "POST",
                    url: url,
                    data: formData,
                    dataType: 'json',
                    processData: false,  // 不处理数据
                    contentType: false,  // 不设置内容类型
                    success: function (data) {
                        if (data.error_msg) {
                            play_audio(data.error_msg);
                        } else if (data.success_msg) {
                            play_audio(data.success_msg);

                            check_task(data.task_id);
                        } else {
                            play_audio(data.ret_msg);
                            init_btn();
                        }
                    }
                }
            )
        });
    }

    function play_audio(filename) {
        var a = document.getElementById("play_audio");
        a.src = "static/audio/" + filename
    }


    function init_btn() {
        $("#btn").removeAttr('disabled');
        $("#btn").text("按住说话");
    }

    function check_task(task_id) {
        $.post(API_URL + "check_task", {task_id: task_id.toString()}, function (data) {
            var msg = JSON.parse(data);
            if (msg.state === "1") {
                console.log("轮训中", task_id);
            } else if (msg.state === '2') {
                init_btn();
                play_audio(msg.success_msg);
                return
            } else if (msg.state === '3') {
                play_audio(msg.error_msg);
                init_btn();
                return
            }

            check_task(task_id)

        })


    }

</script>
</html>